<template>
  <el-button
    type="primary"
    @click="isShow = true"
  >显示对话框</el-button>
  <div>
    <!-- 
      title 是标题 如果需要复杂的标题 那么是使用 template + #header 来使用
      before-close 是关闭前的函数 这个是将原来的函数给替代了 所以别忘了添加关闭指令 isShow = false
    -->
    <el-dialog
      title="对话框练习"
      v-model="isShow"
      :before-close="closeDialog"
    >
      <!-- 头部内容 -->
      <template #header>
        <el-button
          type=""
          @click=""
        >hahaha</el-button>
      </template>
      <!-- 主体内容 -->
      <template #default>
        <p>这是主体内容</p>
      </template>
      <!-- 底部内容 -->
      <template #footer>
        <el-button
          type="primary"
          @click="isShow = false"
        >确认</el-button>
        <el-button
          type=""
          @click="isShow = false"
        >取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  const isShow = ref(false)
  const closeDialog = () => {
    
    console.log('关闭');
    isShow.value = false
  }
</script>

<style scoped></style>